<template>
  <div>
    
    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>设置</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/user">用户和权限</el-breadcrumb-item>
	  	</el-breadcrumb>  
	  </div>

  

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户列表</span>

        <el-button v-if="hasPerm('userInfo:edit')" style="float: right;" type="primary" icon="el-icon-edit" @click="addEditVisible = true">添加</el-button>

      </div>

      <div class="app-diliver-10"></div>
      
      <el-table :data="userList" stripe border style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        
        <el-table-column
          prop="nickName"
          label="昵称"
          width="130">
        </el-table-column>
        
        <el-table-column
          label="帐号"
          prop="account"
          width="130">
        </el-table-column>
        
        <el-table-column
          label="管理仓库"
          width="300">
          <template slot-scope="scope">
            <span v-for="(item, iIndex) in scope.row.warehouseList">
              {{iIndex > 0 ? '、' : ''}}{{item.warehouseTitle}}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="关联门店"
          width="300">
          <template slot-scope="scope">
            <span v-for="(item, iIndex) in scope.row.companyList">
              {{iIndex > 0 ? '、' : ''}}{{item.companyTitle}}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="创建日期"
          prop="createTimeStr"
          width="130">
        </el-table-column>

        <el-table-column
          label="备注"
          prop="remark"
          width="150">
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
          <el-button
            v-if="hasPerm('userInfo:edit')"
            size="mini"
            type="primary"
            plain
            icon="el-icon-edit-outline"
            @click="modifyEditHandle(scope.row.id)"
            >编辑</el-button>
          <NcButton
            v-if="hasPerm('userInfo:edit')"
            size="mini"
            type="danger"
            icon="el-icon-delete"
            :post-option="{url: deleteUrl, callback: getPage, confirm: '确定要删除用户【'+ scope.row.nickName +'】吗？', data: {id: scope.row.id} }"
            >删除</NcButton>

          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>


    </el-card>



    <UserAddEdit :is-show="addEditVisible"></UserAddEdit>
    <UserModifyEdit :edit-param="paramNeededByEdit" :is-show="modifyEditVisible"></UserModifyEdit>
	

  </div>
</template>


<script>

  import NcButton from '../common/NcButton'
  import UserAddEdit from './AddEdit'
  import UserModifyEdit from './ModifyEdit'

  import Api from '../../api/Api'
  import UserInfoApi from '../../api/UserInfoApi'

  import { mapGetters } from 'vuex'

  export default {
  	components: {
  		NcButton, 
      UserAddEdit, UserModifyEdit
  	},
  	data(){
  	  return {
  	  	
        userList: [],

        page: {
          keyWord: '',
          pageNum: 1,
          pageSize: 10
        },

        deleteUrl: UserInfoApi.URL_DELETE,

        //控制弹窗
        addEditVisible: false,
        modifyEditVisible: false,
        edittingUserId: 0,
  	  }
  	},
  	computed: {
  	  ...mapGetters(['hasPerm'])
  	},
  	created(){
  	  this.getPage();

      this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
  	},
    beforeDestroy: function(){
      this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
  	methods: {
      getPage(){
        UserInfoApi.list(this.page, json=>{
          this.userList = json.list;
          this.setPage(json);
        });  
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
      modifyEditHandle(userId){
        this.modifyEditVisible = true;
        this.edittingUserId = userId;
      },
      paramNeededByEdit(){
        return {
          userId: this.edittingUserId
        }
      },
      hideEditDialog(isSuccess){
        this.addEditVisible = false;
        this.modifyEditVisible = false;

        this.edittingUserId = 0;

        if (isSuccess) {
          this.getPage();
        }
      },
  	}
  }
</script>
